<template>
  <div class="css-test">
    <el-slider v-model="blur" :max="50" style="width: 200px"></el-slider>
    <div class="box" :style="{ filter: `blur(${blur}px)` }"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      blur: 0,
    };
  },
  methods: {},
};
</script>
<style lang="scss">
.css-test {
  .box {
    margin: 20px auto;
    width: 1600px;
    height: 1100px;
    background-image: url("../assets/images/xyy.jpg");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}
</style>